import React, { ChangeEvent, ReactNode } from 'react'
import { Comment, Avatar, Tooltip, Form, Button, Input } from 'antd'
import moment from 'moment'
import staticAvatar from 'src/static/image/race_default.png'
import style from './style.module.scss'

interface BaseCommentPageProps {
}

interface BaseCommentPageState {
    comment: string;
    submitStatus: boolean;
}

interface CommentEditorProps {
    value: string;
    onChange: (event: ChangeEvent) => void;
    submitting: boolean;
    onSubmit: () => void;
}

interface CommentItemProps {
    author: {
        nickName: string;
        avatar: string;
    };
    content: string;
    time: string;
    children?: ReactNode;
}

const CommentEditor: React.FC<CommentEditorProps> = (props: CommentEditorProps) => (
    <div className={style.commentEditor}>
        <Avatar src={staticAvatar}/>
        <div>
            <Form.Item>
                <Input.TextArea placeholder={'输入评论'} rows={4} onChange={props.onChange} value={props.value}/>
            </Form.Item>
            <Form.Item>
                <Button htmlType="submit" loading={props.submitting} onClick={props.onSubmit} type="primary">
                    提交
                </Button>
            </Form.Item>
        </div>
    </div>
)

const CommentItem: React.FC<CommentItemProps> = (props: CommentItemProps) => (
    // TODO: 点击用户名跳转至用户主页
    <Comment
        author={<a href={'/'}>{props.author.nickName}</a>}
        avatar={
            <Avatar
                src={props.author.avatar}
                alt={props.author.nickName}
            />
        }
        actions={[<span key="comment-nested-reply-to">回复</span>]}
        content={
            <p>
                {props.content}
            </p>
        }
        datetime={
            <Tooltip title={moment(props.time).format('YYYY-MM-DD HH:mm:ss')}>
                <span>{moment(props.time).fromNow()}</span>
            </Tooltip>
        }
    >
        {props.children}
    </Comment>
)

const demoComment: CommentItemProps = {
    author: {
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        nickName: '头铁的吊毛'
    },
    content: '大学生英语竞赛还有4个月的准备时间，怎样准备呢？此外，在备战或者做题的时候，有哪些技巧和经验？买书发到学校了，但我人在家，学校不收，客服也不理，我。。。',
    time: new Date().toString()
}

export class BaseCommentPage extends React.Component<BaseCommentPageProps, BaseCommentPageState> {
    constructor (props: BaseCommentPageProps) {
        super(props)
        this.state = {
            comment: '',
            submitStatus: false
        }
    }

    handleChangeValue = (event: ChangeEvent): void => {
        const value = (event.target as HTMLInputElement).value
        this.setState(() => ({ comment: value }))
    }

    handleSubmitComment = (): void => {
        console.log('已提交')
    }

    render (): ReactNode {
        return (
            <div>
                <section>
                    <CommentItem {...demoComment}>
                        <CommentItem {...demoComment}>
                            <CommentItem {...demoComment}/>
                        </CommentItem>
                    </CommentItem>
                    <CommentItem {...demoComment}/>
                    <CommentItem {...demoComment}/>
                    <CommentItem {...demoComment}/>
                    <CommentItem {...demoComment}/>
                </section>
                <div className={style.moreBtn}>
                    <Button>查看更多</Button>
                </div>
                <CommentEditor value={this.state.comment}
                    onChange={this.handleChangeValue}
                    submitting={this.state.submitStatus}
                    onSubmit={this.handleSubmitComment}/>
            </div>
        )
    }
}

export default BaseCommentPage
